"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"

interface SearchArtistResultProps {
    query: string
}

export function SearchArtistResult({ query }: SearchArtistResultProps) {
    const [artist, setArtist] = useState<any | null>(null)
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            try {
                setIsLoading(true)
                // 这里应该是真实的API调用，这里用模拟数据

                // 模拟数据
                if (query) {
                    setTimeout(() => {
                        const mockArtist = {
                            id: "artist-1",
                            name: query,
                            image: "/placeholder.svg?height=120&width=120",
                            songCount: 685,
                            albumCount: 70,
                            mvCount: 1587,
                        }
                        setArtist(mockArtist)
                        setIsLoading(false)
                    }, 500)
                } else {
                    setArtist(null)
                    setIsLoading(false)
                }
            } catch (error) {
                console.error("Error fetching artist:", error)
                setIsLoading(false)
            }
        }

        fetchData()
    }, [query])

    if (isLoading || !artist) return null

    return (
        <div className="mb-8">
            <Link href={`/artist/${artist.id}`} className="flex items-center p-4 rounded-lg hover:bg-accent">
                <div className="flex-shrink-0 mr-6">
                    <Image
                        src={artist.image || "/placeholder.svg"}
                        alt={artist.name}
                        width={120}
                        height={120}
                        className="rounded-full"
                    />
                </div>
                <div>
                    <div className="flex items-center mb-2">
                        <h2 className="text-xl font-bold">歌手: {artist.name}</h2>
                    </div>
                    <p className="text-muted-foreground">
                        歌曲:{artist.songCount} 专辑:{artist.albumCount} 视频:{artist.mvCount}
                    </p>
                </div>
            </Link>
        </div>
    )
}

